With stylesheets, you can easily set the font, layout, background of a whole page, or even a whole site. That makes maintenance a lot easier, and it can produce some cool results.
For the record, a basic, example style sheet looks something like this:
h3 {font-size: 16; font-family: arial;}
That would set all level-three headings on the page to font of Arial with a font size of 16. If you want to increase the size of all level three headings, or make them a different colour, you alter that one line.
The 3D effect on the tabs was made by just making the top and left borders of the tab a lighter color than the background and the bottom and right borders a darker color than the background.
Unfortunately, the results are completely wasted in Netscape, as it only allows the setting of the colour of the whole border, not individual sides.
For the body, you can't set a font, which can be really annoying.
With IE, you can set do some pretty neat effects with text and pictures. Things like setting the brightness, transparancy. You can put it in a quasi sine wave, making the words or picture wavy. You can change the cursor: Auto, Crosshair, Default, Hand, Move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait and help.
A lot of things you could only do with Java before, you can do with 4.0 and up browsers. Well Internet Explorer anyway.
Another cool effect you can acheive is with form elements. With text boxes, you can set the background colour, border width and color, font and font color. You can even change all that on the fly. Say if you missed an item on the form, the page could make the background red.
You can do that to Select boxes , the individual options in select boxes, , check boxes and radio buttons . About the only thing you can do in Netscape is make the Text bold.
|
The way you can do interactive features differs wildly in each browser. Basically, to make something move, you stick it in a container on the web page, called a Div. Now to get it to move, you have to tell it's top left corner to go to a different position. To get the corner to move you have to access the top left corners' position with script.
In non-geek speak, you basically say "Move the top left corner of something x units from the left, and y units from the top.
In geek speak, it's something like this.
IE
document.all["something"].style.top = y;
document.all["something"].style.left = x;
That will work in IE 4, 5 and 6.
In netscape 4.x you have to do something like this:
document.layers["something"].left = x;
document.layers["something"].top = y;
Seems reasonable enough. Microsoft and Netscape never really learned to co-operate, and so web developers have learned to live with it.
But then in Netscape 6, that doesn't work anymore, so now you have to do something like this:
document.getElementbyId["something"].style.pixelLeft = x;
document.getElementbyId["something"].style.pixelTop = y;
So now we have 2 different browsers, 5 major versions, 3 methods developers have to use to do the same thing, and lots of headaches.
As mentioned above, style sheets allow developers to easily change the look of a web page. One of the things is visibility, or whether or not something is seen on the web page. The attribute is hidden for something that is not visible, and visible for something that is visible.
element {visibility: hidden;} or
element {visibility: visible;}
And you can change on the fly too, to make something visible or hidden whenever you want.
To make something visible or hidden in IE you would do something like this:
document.all["something"].style.visibility = "hidden"; or
document.all["something"].style.visibility = "visible";
Notice how you use the same words to make something visible as in the style sheet. But the genuises at Netscape did something stupid like the following:
document.layers["something"].visibility = "show"; or
document.layers["something"].visibility = "hide";
Some thing are just a bit easier to do in IE, as well. For instance, to change the words inside of somearea, you would use:
document.all["somearea"].innerHTML = "These are the new words";
To do something like that in Netscape, you have to do something like this:
document.layers["somearea"].document.clear();
document.layers["somearea"].document.write("These are the new words");
document.layers["somearea"].document.close();
Just one of the things that annoys developers.